// 获取 Canvas 元素
const canvas = document.getElementById('spaceCanvas');
const ctx = canvas.getContext('2d');

// 设置 Canvas 大小
canvas.width = 1200;
canvas.height = 800;

// 行星数据
const planets = [
    { name: '水星', color: '#A9A9A9', radius: 8, orbitRadius: 100, speed: 0.04 },
    { name: '金星', color: '#E6E6FA', radius: 12, orbitRadius: 140, speed: 0.03 },
    { name: '地球', color: '#4169E1', radius: 13, orbitRadius: 180, speed: 0.02 },
    { name: '火星', color: '#CD5C5C', radius: 10, orbitRadius: 220, speed: 0.018 },
    { name: '木星', color: '#DEB887', radius: 30, orbitRadius: 280, speed: 0.012 },
    { name: '土星', color: '#F4A460', radius: 25, orbitRadius: 340, speed: 0.01 },
    { name: '天王星', color: '#87CEEB', radius: 20, orbitRadius: 400, speed: 0.008 },
    { name: '海王星', color: '#1E90FF', radius: 19, orbitRadius: 460, speed: 0.006 },
    { name: '冥王星', color: '#D3D3D3', radius: 6, orbitRadius: 520, speed: 0.004 }
];

// 行星角度
let angles = Array(planets.length).fill(0);

// 绘制太阳
function drawSun() {
    // 太阳本体
    const gradient = ctx.createRadialGradient(
        canvas.width / 2, canvas.height / 2, 0,
        canvas.width / 2, canvas.height / 2, 50
    );
    gradient.addColorStop(0, '#FFD700');
    gradient.addColorStop(0.5, '#FFA500');
    gradient.addColorStop(1, '#FF4500');

    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, Math.PI * 2);
    ctx.fillStyle = gradient;
    ctx.fill();
    ctx.closePath();

    // 太阳光晕
    const glowGradient = ctx.createRadialGradient(
        canvas.width / 2, canvas.height / 2, 50,
        canvas.width / 2, canvas.height / 2, 100
    );
    glowGradient.addColorStop(0, 'rgba(255, 215, 0, 0.3)');
    glowGradient.addColorStop(1, 'rgba(255, 69, 0, 0)');

    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, Math.PI * 2);
    ctx.fillStyle = glowGradient;
    ctx.fill();
    ctx.closePath();
}

// 绘制行星
function drawPlanet(planet, angle) {
    // 计算行星位置
    const x = canvas.width / 2 + Math.cos(angle) * planet.orbitRadius;
    const y = canvas.height / 2 + Math.sin(angle) * planet.orbitRadius;

    // 绘制轨道
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, planet.orbitRadius, 0, Math.PI * 2);
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
    ctx.stroke();
    ctx.closePath();

    // 绘制行星
    ctx.beginPath();
    ctx.arc(x, y, planet.radius, 0, Math.PI * 2);
    ctx.fillStyle = planet.color;
    ctx.fill();
    ctx.closePath();

    // 行星光晕效果
    const glowGradient = ctx.createRadialGradient(
        x, y, planet.radius,
        x, y, planet.radius + 10
    );
    glowGradient.addColorStop(0, `${planet.color}80`);
    glowGradient.addColorStop(1, `${planet.color}00`);

    ctx.beginPath();
    ctx.arc(x, y, planet.radius + 10, 0, Math.PI * 2);
    ctx.fillStyle = glowGradient;
    ctx.fill();
    ctx.closePath();

    // 绘制行星名称
    ctx.font = '12px Arial';
    ctx.fillStyle = '#fff';
    ctx.textAlign = 'center';
    ctx.fillText(planet.name, x, y - planet.radius - 5);
}

// 绘制星星背景
function drawStars() {
    for (let i = 0; i < 300; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const radius = Math.random() * 1.5;
        
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.8 + 0.2})`;
        ctx.fill();
        ctx.closePath();
    }
}

// 动画循环
function animate() {
    // 清除画布
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 绘制场景
    drawStars();
    drawSun();

    // 绘制所有行星
    planets.forEach((planet, index) => {
        drawPlanet(planet, angles[index]);
        angles[index] += planet.speed;
    });

    // 继续动画循环
    requestAnimationFrame(animate);
}

// 启动动画
animate(); 